import React, { useEffect} from 'react';
import {useHistory} from 'react-router-dom'
import { getPraiseDataAsync, getPullDataAsync } from "./store/actionCreators";
import { Button } from 'zarm';
// 可以使用react-redux提供的两个hooks
import { useSelector, useDispatch } from "react-redux";
import './Index.scss';
const Index = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getPraiseDataAsync());
    dispatch(getPullDataAsync());
    // eslint-disable-next-line
  }, []);
  const pralist = useSelector((state) => state.hotReducer.praiseList);
  const pullList = useSelector((state) => state.hotReducer.pullList);
  const history =useHistory();
  const addfn = (id) => {
    console.log(id);
    console.log(history);
    history.push("/detail/"+id);

  }

  return (
    <div className="hot">
      <div className="praise">
        <h3>最受好评电影</h3>
        <ul>
          {
            pralist.map(item =>
              <li key={item._id}>
                <img src={item.imgUrl} alt="" />
                <p>{item.title}</p>
                <span>
                  {
                    item.score ? <b>观众评分：{item.score}</b> : <b>多少人想看：{item.wishNum}</b>
                  }
                </span>
              </li>)
          }
        </ul>
      </div>
      <div className="pull">
        <ul>
          {
            pullList.map(item =>
              <li key={item._id}>
                <div className="imgbox">
                  <img src={item.img.replace(/w.h/, '64.90')} alt="" />
                </div>
                <div className="center">
                  <h2>{item.nm}</h2>
                  {
                    item.sc ? <span >观众评: <i>{item.sc}</i> </span> : <span ><i>{item.wish} </i> 人想看</span>
                  }
                  <p>主演:{item.star}</p>
                  <i>{item.showInfo}</i>
                </div>
                {
                  item.preShow ? <Button shape="round" theme="primary" onClick={() => addfn(item.nm)}>预售</Button> : <Button shape="round" theme="danger" onClick={() => addfn(item._id)}>购票</Button>
                }
              </li>)
          }
        </ul>
      </div>


    </div>
  );
}

export default Index;